import React, { memo, useEffect, useMemo, useState } from "react";
import style from "./sty.module.css";
import { reqArtistInfo } from "@/api/artist";
import NavBar from "@/components/NavBar";
import Content from "./child/content";

const SingerPage = (props) => {
  console.log(props);
  const [info, setInfo] = useState({});
  const [songs, setHotSongs] = useState([]);
  const id = props.match.params.id;
  useEffect(() => {
    if (id) {
      getInfo(id);
    }
  }, [id]);

  const getInfo = async (id) => {
    const res = await reqArtistInfo(id);
    if (res.code === 200) {
      setInfo(res.artist);
      setHotSongs(res.hotSongs);
    }
  };

  const singerInfo = useMemo(() => info || {}, [info]);
  const SingerId = useMemo(() => id || "", [id]);
  const singerSongs = useMemo(() => songs, [songs]);
  return (
    <div className="page">
      <NavBar>{info.name}</NavBar>
      <div
        className={style.singerImg}
        style={{ backgroundImage: `url(${info.img1v1Url})` }}
      />
      <div className={style.content}>
        <Content info={singerInfo} id={SingerId} songs={singerSongs} />
      </div>
    </div>
  );
};

export default memo(SingerPage);
